<template>
  <view class="app-container">
    <view class="data-list" v-if="list.length">
      <view class="data-list-item" v-for="(item,index) in list" :key="index">
        <view class="data-list-item-title">
          <view class="data-list-item-title-left">
            <text :class="item.num>0?'in':'out'">{{item.num>0?'充值':'消费'}}</text>
          </view>
          <view class="data-list-item-title-right">
            <text class="data-list-item-title-right-text">{{ item.created_at }}</text>
          </view>
        </view>
        <view class="data-list-item-footer">
          交易前：￥
          <text class="data-list-item-footer-text money">{{ item.before_num }}</text>
        </view>
        <view class="data-list-item-footer">
         变动金额：￥
          <text class="data-list-item-footer-text num" >{{ item.num }}</text>
        </view>
        <view class="data-list-item-footer">
          交易后：￥
          <text class="data-list-item-footer-text money">{{ item.after_num || '0.00' }}</text>
        </view>
        <view class="data-list-item-content">
          备注说明：
          <text class="data-list-item-content-text remark" >{{ item.remark }}</text>
        </view>
      </view>

    </view>
    <view class="empty" v-else>
      <u-empty text="暂无数据" mode="list"></u-empty>
    </view>

  </view>
</template>

<script>
import {credit_list as data_list} from "@/pages/packageA/user/log/log_api";

export default {
  data() {
    return {
      page: 1,
      list: []
    };
  },
  onLoad() {
    if (!this.hasLogin){
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      })
      return
    }
    this.getList()
  },
  onPullDownRefresh: function () {
    this.getList(true);
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 2000)
  },
  //触底
  onReachBottom() {
    this.getList()
  },
  methods: {
    getList(is_init) {
      if (is_init) {
        this.page = 1
        this.list = []
      }
      data_list({page: this.page})
          .then(res => {
            console.log(res)
            if (res.code === 0) {
              this.list = this.list.concat(res.data.list)
            }
          }).finally(() => {
        this.page += 1
      })
    }
  },
}
</script>

<style lang="scss">
.data-list {
  padding: 20rpx;
  .data-list-item {
    margin-bottom: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

    .data-list-item-title {
      display: flex;
      justify-content: space-between;
      .in{
        color: rgba(218, 35, 231, 0.7);
      }
      .out{
        color: #e90808;
      }

      .data-list-item-title-left {
        .data-list-item-title-left-text {
          font-size: 32rpx;
          font-weight: bold;
        }

        .data-list-item-title-right {
          .data-list-item-title-right-text {
            font-size: 24rpx;
            color: #999;
          }
        }

        .data-list-item-content {
          margin-top: 10rpx;

          .data-list-item-content-text {
            font-size: 28rpx;
            color: #666;
          }
        }

        .data-list-item-footer {
          margin-top: 10rpx;

          .data-list-item-footer-text {
            font-size: 28rpx;
            color: #666;
          }
        }

      }
    }

    .num {
      color: #19a6de;
    }
    .remark{
      color: #666;
      font-size: 28rpx;
    }
    .money {
      color: #e90808;
    }

    .pay-success {
      color: #089c08;
    }

    .pay-error {
      color: rgba(200, 196, 196, 0.9);
    }
  }
}

</style>
